//视频播放
document.querySelector('.video ul').onclick=function(){
    document.body.style.overflow='hidden'
    document.querySelector('.video-wrapper').style.display='block'
}
document.querySelector('.video-wrapper .close').onclick=function(){
    document.body.style.overflow='auto'
    document.querySelector('.video-wrapper').style.display='none'
    document.querySelector('.video-wrapper video').pause()
}

//追加图片
let cols=[
    {left:0,top:0},
    {left:254,top:0},
    {left:254*2,top:0},
    {left:254*3,top:0},
]
let imgHeight=0
function Waterfall(){
    for(let num=1; num<=56;num++){
        let liObj=document.createElement('li')
        liObj.style.position='absolute'
        liObj.style.display='none'
        liObj.innerHTML=`
        <div>
            <img src="./assets/imgs2/${num}.jpg" alt="">
        </div>
        <span>${num}初秋絮语，用音乐记下你的点点滴滴</span>
        <p>
            <i class="iconfont icon-aixin"></i>${num}${num}.6w喜欢
        </p>
        `
        document.querySelector('.video ul').appendChild(liObj)
        liObj.querySelector('img').onload=function(){
            let imgHeightIndex=0
            cols.forEach((item,i)=>{
                if(cols[imgHeightIndex].top>item.top){
                    imgHeightIndex=i
                }
            })
            liObj.style.display='block'
            liObj.style.left=cols[imgHeightIndex].left+'px'
            liObj.style.top=cols[imgHeightIndex].top+'px'
            cols[imgHeightIndex].top+=liObj.offsetHeight
            imgHeight=cols[imgHeightIndex].top
        }
    }
}
window.onscroll=function(){
    let clientHeight=window.innerHeight || document.documentElement.clientWidth
    let scrollHeight=document.documentElement.scrollTop || document.body.scrollTop 
    if(clientHeight+scrollHeight>=imgHeight){
        Waterfall()
    }
}
window.onload=Waterfall